<!-- 支付弹框组件 -->
<template>
	<!-- 支付弹框 -->
	<view class="pay-pop" v-if="showPay" @tap.stop>
		<view class="pay-cont">
			<view class="pay-head">
				<i class="iconfont iconguanbi pay-head-i" @tap="closePop"></i>
				<view class="pay-head-text">确认支付</view>
			</view>
			<view class="pay-n">¥{{ realPay | price_filter }}</view>
			<view class="pay-pattern">选择付款方式</view>
			<scroll-view scroll-y class="bank-card-box">
				<view class="row4_item" v-for="(item, index) in items" :key="index" @tap="changeType(index, item.value)">
					<view class="row4_item_letf">
						<i :class="item.class"></i>
						<text>{{ item.text }}</text>
					</view>
					<i class="iconfont" :class="[item.value == payType ? 'iconduigou' : '']"></i>
				</view>
				<!-- <navigator hover-class="false" class="row4_item" url="addBankcard">
					<view class="row4_item_letf">
						<i class="iconfont iconyinhangka icon-styl4"></i>
						<text class="addCard">添加银行卡</text>
					</view>
					<view class="row4_item_rgith"><i class="iconfont iconjiantou icon-styl5"></i></view>
				</navigator> -->
			</scroll-view>
			<view class="pay-btn" @tap="confirm">确认付款</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		realPay: Number
	},
	data() {
		return {
			items: [
				{
					class: 'iconfont iconyue-mian icon-styl0',
					text: '账户余额',
					value: 0
				},
				// {
				// 	class: 'iconfont iconzhifubao icon-styl1',
				// 	text: '支付宝支付',
				// 	value: 1
				// },
				{
					class: 'iconfont iconweixinzhifu icon-styl2',
					text: '微信支付',
					value: 2
				},
				// {
				// 	class: 'iconfont iconjiachang icon-styl3',
				// 	text: '家长代付',
				// 	value: 3
				// }
			],
			change: 0,
			payType: 0,
			showPay: false,
			currentSelect: 0,
			state: 2,
			order: {}
		};
	},
	filters:{
		price_filter(v){
			return v && (v/100).toFixed(2)
		}
	},
	methods: {
		goPay(order) {
			this.showPay = true;
			order && (this.order = order);
		},
		closePop() {
			this.showPay = false;
		},
		confirm(){
			this.closePop()
			if(+this.payType !== 0&& +this.payType !==2){
					return uni.showToast({
						title: "暂不支持该支付功能~",
						icon: 'none'
					})
				}
			/* 余额支付 */
				if(this.payType===0){
				this.order['pay_way'] ='packet';
				uni.showLoading({
					mask: true,
					title:'支付中'
				})
				this.$zbapi.apiPost('stu/order/payment', this.order).then(res=>{
					uni.hideLoading()
					switch (res.data.code){
						/* 支付成功 */
						case 0:
						uni.showToast({
							title:"支付成功",
							icon:'none',
							complete() {
								setTimeout(a=>{
									uni.navigateBack({
										delta:2
									})
								},800);
							}
						})
							break;
						case 401:
							uni.showToast({
								title: '学情分抵扣比例超过限制',
								icon:'none'
							});
							break;
						case 402:
							uni.showToast({
								title: res.data.message,
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.navigateBack({
											delta:2
										})
									},800);
								}
							});
							break;
						case 410:
							uni.showToast({
								title: "该课程已经购买过了！",
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.navigateBack({
											delta:2
										})
									},800);
								}
							});
							break;
						case 501:
							uni.showToast({
								title: '余额不足',
								icon:'none'
							});
							break;
						case 4060:
							uni.showToast({
								title: res.data.message,
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.redirectTo({
											url:'../classOrder/order-list'
										})
									
									},800);
								}
							});
							break;
						default:
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
							break;
					}
				})	
				}
				/* 微信支付 */
				if(this.payType===2){
				var data={
						course_id:this.order.course_id,
						user_id:uni.getStorageSync('currentChild').student_id
					};
				this.$zbapi.apiPost('stu/order/wx/payment',data).then(res=>{
					if(res.data.code == 0){
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: res.data.data.wxpay,
							success: e => {
							uni.showToast({
								title: "支付成功",
								complete() {
									setTimeout(a=>{
										uni.reLaunch({
											url: './free-index'
										})
									},800)
								}
							})
							},
							fail: e => {
								if(/canceled/.test(e.errMsg)){
									uni.showToast({
										title: "用户取消支付",
										icon: "none"
									})								
								} else {
									uni.showModal({
										content: '支付失败,原因为: ' + e.errMsg,
										showCancel: false
									});								
								}
							}
						});
					} 
					
					switch (res.data.code){
						case 401:
							uni.showToast({
								title: '学情分抵扣比例超过限制',
								icon:'none'
							});
							break;
						case 402:
							uni.showToast({
								title: res.data.message,
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.navigateBack({
											delta:2
										})
									},800);
								}
							});
							break;
						case 410:
							uni.showToast({
								title: "该课程已经购买过了！",
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.navigateBack({
											delta:2
										})
									},800);
								}
							});
							break;
						case 501:
							uni.showToast({
								title: '支付服务失败',
								icon:'none'
							});
							break;
						case 4061:
							uni.showToast({
								title: res.data.message,
								icon:'none',
								complete() {
									setTimeout(a=>{
										uni.redirectTo({
											url:'../classOrder/order-list'
										})
									},800);
								}
							});
							break;
						default:
						uni.showToast({
							title: res.data.message,
							icon:'none'
						});
							break;
					}
				})
				}
			},
		/* 切换支付类型 */
		changeType(index, value) {
			this.change = index;
			this.payType = value;
		}
	}
};
</script>

<style>
.pay-pop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
.pay-cont {
	position: absolute;
	z-index: 9999;
	bottom: 0;
	width: 750upx;
	height: 780upx;
	background-color: #ffffff;
}

.pay-head {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2upx solid rgba(229, 229, 229, 0.5);
	padding-left: 30upx;
	padding-right: 30upx;
	height: 87upx;
}
.pay-head-i {
	position: absolute;
	color: #999999;
	line-height: 90upx;
	font-size: 35upx;
	left: 30upx;
}
.pay-head-text {
	font-size: 36upx;
	color: #333333;
}
.pay-n {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 66upx;
	height: 104upx;
	margin-top: 20upx;
	color: #333333;
}
.pay-pattern {
	font-size: 34upx;
	color: #999999;
	padding: 20upx 0 20upx 30upx;
	border-bottom: 2upx solid rgba(229, 229, 229, 1);
}

.bank-card-box {
	height: 306upx;
}
.row4_item {
	width: 690upx;
	padding: 0 30upx;
	height: 100upx;
	line-height: 100upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2upx solid rgba(229, 229, 229, 1);
}
.row4_item_letf {
	display: flex;
	justify-content: flex-start;
	height: 100upx;
	line-height: 100upx;
}
.row4_item_letf text {
	color: #333333;
	font-size: 34upx;
}
.row4_item_letf .iconfont {
	font-size: 40upx;
	line-height: 100upx;
	margin-right: 16upx;
}
.icon-styl0 {
	color: #ffb800;
}
.icon-styl1 {
	color: #1296db !important;
}
.icon-styl2 {
	color: #41b035 !important;
}
.icon-styl3 {
	color: #fe9900;
}
.icon-styl4 {
	color: #2f77f1;
}
.icon-styl5 {
	color: #999999;
	display: inline-flex;
	line-height: 98upx !important;
}
.iconduigou {
	color: #fe9900;
	font-size: 36upx;
	line-height: 100upx;
}
.pay-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40upx;
	width: 690upx;
	height: 80upx;
	background-color: #fe9900;
	color: #ffffff;
	font-size: 34upx;
	border-radius: 8upx;
}
</style>
